<template>
  <div class="control-btn">
    <div
      v-for="item in filterBtnList"
      :key="item.key"
    >
      <div
        class="btn"
        :class="[item.key, disabled && 'disabled', mini && 'mini']"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // mini 版本
    mini: {
      type: Boolean,
      default: false,
    },
    // 禁用所有按钮
    disabled: {
      type: Boolean,
      default: false,
    },
    // 要隐藏的按钮
    hidden: {
      type: Array,
      default() {
        return [];
      },
    },
    // 使用全屏功能
    narrow: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    filterBtnList() {
      const res = this.btnList.filter((e) => {
        return this.hidden.findIndex((p) => e.key == p) === -1;
      });
      return res;
    },
  },
  data() {
    return {
      btnList: [
        {
          title: "关闭",
          key: "close",
        },
        {
          title: "缩小",
          key: "remove",
        },
        {
          title: "缩小",
          key: "fullResize",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.control-btn {
  display: flex;
  &:hover {
    .btn {
      .hover {
        cursor: pointer;
        opacity: 1;
      }
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin: 0 4px;
    color: #1d2129;
    font-weight: bold;
    border-radius: 50%;
    &.mini {
      width: 8px;
      height: 8px;
      margin: 0 2px;
    }
    &.disabled {
      pointer-events: none;
    }
    .icon-base {
      opacity: 0;
    }
  }
  .close {
    background-color: #fc625d;
  }
  .remove {
    background-color: #fcbc40;
  }
  .resize,
  .fullResize {
    background-color: #34c749;
  }
}
</style>
